<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex; align-items: center; gap: 2px">
        <el-input
          v-model="searchDTO.projectName"
          clearable
          style="width: 150px; border-radius: 5px"
          placeholder="请输入题目名称"
        />
        <el-select
          v-model="searchDTO.status"
          placeholder="请选择评审状态"
          style="width: 150px"
          clearable
        >
          <el-option
            v-for="item in [
              { label: '待评审', value: 0 },
              { label: '评审通过', value: 1 },
              { label: '评审拒绝', value: 2 },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button icon="search" @click="getList" type="success"></el-button>
      </div>
      <el-button
        type="primary"
        icon="plus"
        style="border-radius: 10px"
        v-if="RoleUtils.verifyRole([2])"
        @click="add"
        >添加
      </el-button>
    </div>

    <CommonDialogForm
      v-model:has-loading="loading"
      v-model:visible="dialogAdd"
      v-model:form-params="addDTO"
      :rules="MidtermDefenseRules.addRules"
      :item-config="MidtermDefenseParams.formColumn"
      :title="'添加中期答辩记录'"
      :width="'20%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onAdd"
    >
    </CommonDialogForm>

    <CommonDialog
      v-model:has-loading="loading"
      v-model:visible="dialogUpdate"
      :title="'评审中期答辩'"
      :width="'20%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onAudit"
    >
      <el-form label-width="100px" v-model="auditDTO">
        <el-form-item label="学生姓名" prop="studentName">
          <span>{{ auditDTO.studentName }}</span>
        </el-form-item>
        <el-form-item label="题目名称" prop="projectName">
          <span>{{ auditDTO.projectName }}</span>
        </el-form-item>
        <el-form-item label="答辩时间" prop="submissionTime">
          <span>{{ auditDTO.defenseTime }}</span>
        </el-form-item>
        <el-form-item label="附件" prop="primary">
          <el-button type="primary" icon="document" @click="fileShow(auditDTO)"> 查看</el-button>
        </el-form-item>
        <el-form-item label="评审状态" prop="status">
          <el-select v-model="auditDTO.status" placeholder="请选择评审状态" clearable>
            <el-option
              v-for="item in [
                { label: '待评审', value: 0, disabled: true },
                { label: '评审通过', value: 1 },
                { label: '评审拒绝', value: 2 },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="评审意见" prop="reviewComment">
          <el-input
            v-model="auditDTO.reviewComment"
            type="textarea"
            :rows="3"
            placeholder="请输入评审意见"
          ></el-input>
        </el-form-item>
        <el-form-item label="评审分数" prop="score">
          <el-input-number
            style="width: 100%"
            v-model="auditDTO.score"
            precision="2"
            placeholder="请输入评审分数"
          />
        </el-form-item>
      </el-form>
    </CommonDialog>

    <CommonDialog
      v-model:has-loading="loading"
      title="中期答辩详细"
      v-model:visible="showAuditDialog"
      :width="'20vw'"
      :close-tips="false"
      :has-footer="false"
    >
      <el-form label-width="100px" v-model="showDetailBO">
        <el-form-item label="评审状态">
          <el-tag
            :type="
              showDetailBO.status == 0 ? 'info' : showDetailBO.status == 1 ? 'success' : 'danger'
            "
          >
            {{
              showDetailBO.status == 0
                ? '待评审'
                : showDetailBO.status == 1
                  ? '评审通过'
                  : '评审未通过'
            }}
          </el-tag>
        </el-form-item>
        <el-form-item label="答辩分数">
          {{ showDetailBO.score }}
        </el-form-item>
        <el-form-item label="学生姓名">
          {{ showDetailBO.studentName }}
        </el-form-item>
        <el-form-item label="题目名称">
          {{ showDetailBO.projectName }}
        </el-form-item>
        <el-form-item label="答辩时间">
          {{ showDetailBO.defenseTime }}
        </el-form-item>
        <el-form-item label="评审意见">
          {{ showDetailBO.reviewComment }}
        </el-form-item>
        <el-form-item label="附件">
          <el-button type="primary" icon="document" @click="fileShow(showDetailBO)">
            查看
          </el-button>
        </el-form-item>
      </el-form>
    </CommonDialog>

    <CommonPageTable
      :table-column="MidtermDefenseParams.tableColumn"
      :table-data="searchVO"
      :table-loading="loading"
      :table-attribute="{
        'empty-text': '暂无数据',
        height: TableEnum.height,
      }"
      :page-params="searchDTO.page"
      :page-attribute="{
        size: 'small',
        pageSizes: [10, 20, 50, 100],
        layout: ' total, sizes, prev, pager, next, jumper',
      }"
      @search="getList"
      @audit="audit"
      @detail="detail"
    />
  </div>
</template>

<script setup lang="ts">
//----------------------------------导入区---------------------------------
import { onMounted, reactive, ref } from 'vue'
import type { ResultPageType } from '@/resources/interface/ResultTypes'
import CommonPageTable from '@/components/CommonPageTable.vue'
import { TableEnum } from '@/enums/TableEnum'
import CommonDialogForm from '@/components/CommonDialogForm.vue'
import ObjectUtils from '@/utils/ObjectUtils'
import { MidtermDefenseApi } from '@/apis/api/midtermDefense/MidtermDefenseApi'
import { MidtermDefenseParams } from '@/resources/parameters/midtermDefense/MidtermDefenseParameters'
import type {
  MidtermDefenseAddDTOType,
  MidtermDefenseAuditDTOType,
  MidtermDefenseSearchDTOType,
  MidtermDefenseSearchVOType,
} from '@/resources/interface/midtermDefense/MidtermDefenseTypes'
import { MidtermDefenseRules } from '@/resources/rules/midtermDefense/MidtermDefenseRules'
import ElementUtil from '@/utils/ElementUtil'
import { ProjectApi } from '@/apis/api/project/ProjectApi.ts'
import ArrayUtils from '@/utils/ArrayUtils.ts'
import type { StudentProjectVOType } from '@/resources/interface/project/ProjectTypes.ts'
import { RoleUtils } from '@/utils/RoleUtils.ts'
import CommonDialog from '@/components/CommonDialog.vue'
import type { ProposalReportSearchVOType } from '@/resources/interface/proposalReport/ProposalReportTypes.ts'
import { ElNotification } from 'element-plus'

//----------------------------------数据区---------------------------------
const loading = ref(false)
const dialogAdd = ref(false)
const dialogUpdate = ref(false)
const searchDTO = reactive<MidtermDefenseSearchDTOType>({ ...MidtermDefenseParams.searchDTO })
const searchVO = ref<ResultPageType>()
let addDTO = reactive<MidtermDefenseAddDTOType>({ ...MidtermDefenseParams.addDTO })
let auditDTO = reactive<MidtermDefenseSearchVOType>({ ...MidtermDefenseParams.searchVO })
const showAuditDialog = ref(false)
let showDetailBO = reactive<MidtermDefenseSearchVOType>({ ...MidtermDefenseParams.searchVO })
// ----------------------------------方法区--------------------------------

const detail = (row: ProposalReportSearchVOType) => {
  showAuditDialog.value = true
  loading.value = true
  showDetailBO = reactive(ObjectUtils.copy(row, showDetailBO))
  loading.value = false
}
/**
 * 添加 中期答辩表 前置
 */
const add = async () => {
  dialogAdd.value = true
  loading.value = true
  const result = await ProjectApi.list()
  let find = MidtermDefenseParams.formColumn.find((item) => item.field === 'projectId')
  if (find) {
    ArrayUtils.clear(find.options)
    result.data.forEach((item: StudentProjectVOType) => {
      find.options.push({
        label: item.name,
        value: item.id,
      })
    })
  }
  loading.value = false
}
/**
 * 添加 中期答辩表 回调
 * @param params 表单数据
 */
const onAdd = async (params: MidtermDefenseAddDTOType) => {
  await MidtermDefenseApi.add(params)
  loading.value = false
  await getList()
  ObjectUtils.resetObject(addDTO, MidtermDefenseParams.addDTO)
  let find = MidtermDefenseParams.formColumn.find((item) => item.field === 'documentPath')
  if (find) {
    find.options.fileList = []
  }
}
const fileShow = (row: MidtermDefenseSearchVOType) => {
  if (row.documentPath) {
    window.open(row.documentPath, '_blank')
  } else {
    ElNotification.error('未上传附件')
  }
}
/**
 * 更新 中期答辩表 前置
 * @param vo 选中数据
 */
const audit = (vo: MidtermDefenseSearchVOType) => {
  auditDTO = reactive(ObjectUtils.copy(vo, auditDTO))
  dialogUpdate.value = true
}
/**
 * 更新 中期答辩表 回调
 */
const onAudit = async () => {
  const auditBO: MidtermDefenseAuditDTOType = {
    id: auditDTO.id,
    reviewComment: auditDTO.reviewComment,
    status: auditDTO.status,
    score: auditDTO.score,
  }
  await MidtermDefenseApi.audit(auditBO)
  dialogUpdate.value = false
  await getList()
}
/**
 * 删除 中期答辩表
 * @param vo 选中数据
 */
const remove = async (vo: MidtermDefenseSearchVOType) => {
  if (await ElementUtil.openBox({ content: '是否删除,删除后不可恢复！' })) {
    await MidtermDefenseApi.delete(Array.of(vo.id))
    await getList()
  }
}
/**
 * 获取 中期答辩表 列表
 */
const getList = async () => {
  loading.value = true
  const result = await MidtermDefenseApi.search(searchDTO)
  searchVO.value = result.data
  loading.value = false
}

onMounted(() => {
  getList()
})
</script>

<style scoped></style>
